import React from 'react'
import Logo from '../../assets/image/logo.jpg'
import MiniQRCODE from '../../assets/image/miniqrcode.jpeg'
import GZH from '../../assets/image/gzh.jpg'
import { Menu, Icon } from 'antd';
import './index.scss'
import {HomeContainer, CompanyContainer, ProductContainer, ContactUsContainer, JoinUsContainer} from "../containers";


export default class Home extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            current: '首页',
            menuItem: [
                {name: '首页'},
                {name: '企业介绍'},
                {name: '产品展示'},
                {name: '联系我们'}],
            isNav: true
        }
    }

    componentDidMount() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isiOS || isAndroid) {
            this.setState({
                isNav: false
            })
        }
    }

    handleClick = e => {
        console.log('click ', e);
        this.setState({
            current: e.item.props.children
        });
    };
    render() {
        const {current, menuItem, isNav} = this.state
        if (!isNav) {
            return <div style={{textAlign: 'center', fontSize: 52}}>请用电脑浏览器打开</div>
        }
        return (
            <div className='home-container'>
                <div className='header-line'></div>
                <div className='header'>
                    <div className='logo'>
                        <img src={Logo} alt="logo"/>
                    </div>
                    <div className='menus'>
                        <Menu onClick={this.handleClick}
                              selectedKeys={[current]}
                              mode="horizontal"

                        >
                            {
                                menuItem.map((item) => (
                                    <Menu.Item className='item'>
                                        {item.name}
                                    </Menu.Item>
                                ))
                            }
                        </Menu>
                    </div>
                </div>
                <div className='main-content'>
                    {
                        current && current === '首页' ? (
                            <HomeContainer/>
                        ) : ( current === '企业介绍'? (
                            <CompanyContainer/>
                        ) : (current === '产品展示' ? (
                            <ProductContainer/>
                        ) :(current === '联系我们' ? (
                            <ContactUsContainer/>
                        ) : ( null))) )
                    }

                </div>
                <div className='footer'>
                    <div className='footer-contact-us'>
                        <p className='contact-us__txt'>
                            联系我们
                        </p>
                        <div className='contact-us-content'>
                            <div className='contact-us__qrcode-content'>
                                <div>
                                    <img src={GZH} alt=""/>
                                    <div>官方公众号</div>
                                </div>
                                <div>
                                    <img src={MiniQRCODE} alt=""/>
                                    <div>官方小程序</div>
                                </div>
                            </div>
                            <div className='contact-us__phone'>
                                <div className='phone'>
                                    <Icon type="phone" />
                                    18202941461 | 15029009469
                                </div>
                                <div className='website'>
                                    <Icon type="phone" />
                                    www.xingrengou.cn
                                </div>
                                <div className='address'>
                                    <Icon type="phone" />
                                    西安市曲江新区芙蓉西路曲江城市花园1期6号楼1单元10301室</div>

                            </div>
                        </div>

                    </div>
                    <div className='footer-content'>
                        Copyright © 2016-2026 西安梦启成诚网络科技有限公司 版权所有. 陕ICP备18009062号
                    </div>
                </div>
            </div>
        )
    }
}